@section('title')
	推荐律团 @parent
@show
@section('content')      
        <!-- Top Navbar-->
        <div class="navbar theme-white">
          <div class="navbar-inner">
			<div class="left"><a href="{{ route('group.create') }}" class="external link icon-only"> <i class="icon icon-plus"></i></a></div>
            <div class="center sliding">圈子</div>
          </div>
        </div>
        <div class="pages navbar-through toolbar-through">
          <div data-page="groupmain-main" class="page pb60">
						<form class="searchbar searchbar-init">
							<div class="searchbar-input">
							<input type="search" placeholder="律团名称" class="kewword" value="{{ Input::get('keyword')  }}"><a class="searchbar-clear" href="#"></a>
							</div><a class="searchbar-cancel" href="#" style="display: block; margin-right: 0px;">取消</a>
						</form>
						<div class="searchbar-overlay"></div>
            <div class="page-content infinite-scroll">
								<div class="content-block">
										<p class="buttons-row row">
										<a href="{{ route('group.recommend') }}" class="external col-50 button">推荐团</a>
										<a href="#" class="col-50 button active">粉丝团</a>
										<a href="{{ route('group.list.mine') }}" class="external col-50 button">我的团</a>
										</p>            
										<div class="list-block media-list stories-list list-block-search searchbar-found">
											@if($data)
											<ul class="group_ul">
												@foreach($data AS $item)
												<li>
													<a class="external item-link group" href="{{ route('group.index', $item['group_id']) }}" title="{{ $item['group_name'] }}">
														@if ($item['group_avatar'] )
														<img src="{{ asset( $item['group_avatar']) }}" class="group_avatar">
														@else
														<img src="{{ asset('/img/group_avatar.jpg') }}"  class="group_avatar">
														@endif
														<div class="group-info">
															<div class="pull-left list-group-name">{{ $item['group_name'] }}</div>
															<div class="pull-right">{{ $item['member_cnt'] }}人</div>
														</div>
													</a>
												</li>
												@endforeach
											</ul>
											@endif
										</div>
								</div>
                     
            </div>
          </div>
        </div>
@include('widgets.toolbar', array('active'=>'sns'))
@stop
@section('popup')
<div class="popup popup-city">
	<div class="navbar theme-white">
		<div class="navbar-inner">
			<div class="left"><a href="#" class="close-popup link icon-only">取消</a></div>
			<div class="center sliding field-name">切换城市</div>
			<div class="right"></div>
		</div>
	</div>
</div>
@show
@section('bodyEnd')
{{ HTML::script('js/geo.js') }}
<script>
getCurrentLatLng(function(pos){
	var addr_url = "{{ route('common.addressCode',['_lat_','_lng_']) }}";
	addr_url = addr_url.replace('_lat_', pos.lat).replace('_lng_', pos.lng);
	$$.get(addr_url, function(data){
	  
	  $$.getJSON("{{ route('common.area') }}", function (data){
		area_data = data;
		var province_ele = $$('#field_province');
		for (var key in area_data) {
		var k = String(key);
		if ( k.indexOf('0000') == 2)  {
			var op = document.createElement('option');
			op.value = k, op.innerHTML = area_data[k];
			if ( province_ele.attr('default') &&  province_ele.attr('default') == k ) {
			op.selected = true;
			}
			province_ele.append(op);
		}
		
		}
		if ( province_ele.attr('default')) {
			$$('#field_province').trigger('change');
		}
		
	});


	},'json');
}, function(err){
	alert(err);
});

var wWidth = ($$('.page-content').width()-40)/2;
var wHeight = Math.round(wWidth*(220/300));
$$('.list-block .group_ul li a').css({width: wWidth+'px', height: wHeight+28+'px'});
$$('.group_avatar').valignImg(wWidth, wHeight);

$$(document).on('keyup', '.kewword', function(){
		keyword = $$(this).val();
		page = 1;
		if($$(this).val())
		{
			$$('.searchbar').addClass('searchbar-not-empty');
		}

		loading = true;
		ajax();
});
$$(document).on('click', '.searchbar-clear', function(){
			$$('.searchbar').removeClass('searchbar-not-empty');
})

var loading = false;
var keyword = '';
var area_data = {};

$$('.switch-city').on('click', function(){
	city_id = ($$('#field_city').val());
	myApp.closeModal();
	search();
})

$$('.all-city').on('click', function(){
	region_id = '';
	city_id = -1;
	myApp.closeModal();
	search();
})
var search = function(){
	var url ='{{ route("group.list.all") }}';
	location.href = url + '?'+'keyword='+$$('.kewword').val();
}

$$(document).on('change','#field_province', function(){
	var val = $$(this).val();
	$$(this).attr('default','');
	$$('#field_city').html('');
	$$('#field_district').html('');
	var city_ele = $$('#field_city');
	var defval = '';
	if (val != '') {
		defval = val.replace(/0000$/,'');
	}else{
		return;
	}
	for (var key in area_data)
	{
		var k = String(key);
		if ( k.indexOf('00')==4 && k.indexOf(defval)===0 )
		{
			var op = document.createElement('option');
			op.value = k, op.innerHTML = area_data[k];
			if ( $$('#field_city').attr('default') && $$('#field_city').attr('default') == k  ) {
				op.selected = true;
			}
			city_ele.append(op);
		}
	}
	city_ele.attr('default','')
});
	
var ajax = function (){
			$$.ajax({
					type: "get",
					dataType: "json",
					url: "{{ route('group.list.all') }}",
					data: "keyword="+keyword,
					success: function(response){
						var _html = '';
						if(response && response.length>0)
						{
								for(i=0;i<response.length;i++)
								{
									  n = response[i];
										_html+='<li>';
										_html+='<a class="external item-link group" href="{{ Config::get("app.url") }}/group/'+n.group_id+'" title="'+n.group_name+'">';
										if(n.group_avatar)
										{
											 _html+='<img src="/'+n.group_avatar+'" class="group_avatar">';
										} else {
											 _html+='<img src="/img/group_avatar.jpg" class="group_avatar">';
										}
										_html+='<div class="group-info">';
										_html+='<div class="pull-left list-group-name">'+n.group_name+'</div>';
										_html+='<div class="pull-right">'+n.member_cnt+'人</div>';										
										_html+='</div>';
										_html+='</a>';
										_html+='</li>';
								}
						}
						if(page==1)
						{
							$$('.list-block ul').html(_html);
						} else {
							$$('.list-block ul').append(_html);
						}
						$$('.list-block .group_ul li a').css({width: wWidth+'px', height: wHeight+28+'px'});
						$$('.group_avatar').valignImg(wWidth, wHeight);

						$$('.infinite-scroll-preloader').remove();
					}
		});
}

</script>
@show